<!--<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>dom Framework</title> 
  <script> 
      var dom = function(s){ 
        return document.getElementById(s) 
      } 
      dom.cssName = function (name){ 
        var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'], 
        rcap = /-([a-z])/g,capfn = function($0,$1){ 
          return $1.toUpperCase(); 
        }; 
        dom.cssName = function(name, target, test){ 
          target = target || document.documentElement.style; 
          for (var i=0, l=prefixes.length; i < l; i++) { 
            test = (prefixes[i] + name).replace(rcap,capfn); 
            if(test in target){ 
              return test; 
            } 
          } 
          return null; 
        } 
        return dom.cssName(name); 
      } 
      window.onload = function(){ 
        var el = dom("test"), 
        css3transition = dom.cssName("transition"); 
        el.style[css3transition] = "all 5s ease-in" 
        dom("start").onclick = function(){ 
          el.style.width = "400px"; 
        } 
      } 
    
    </script> 
    <style> 
      #test{ 
        background: red; 
        width:10px; 
        height:30px; 
      } 
    </style> 
  </head> 
  <body> 
    <h3>CSS3 动画 by 司徒正美</h3> 
    <div id="test"> 
      TEXT 
    </div> 
    <button id="start" type="button">开始测试</button> 
  </body> 
</html> -->
<!--　　示例2,同时操作多个属性的渐变，我们需要用“,”隔开。-->

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>dom Framework</title> 
 
    <script> 
        var dom = function(s){ 
        return document.getElementById(s) 
      } 
      dom.cssName = function (name){ 
        var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'], 
        rcap = /-([a-z])/g,capfn = function($0,$1){ 
          return $1.toUpperCase(); 
        }; 
        dom.cssName = function(name, target, test){ 
          target = target || document.documentElement.style; 
          for (var i=0, l=prefixes.length; i < l; i++) { 
            test = (prefixes[i] + name).replace(rcap,capfn); 
            if(test in target){ 
              return test; 
            } 
          } 
          return null; 
        } 
        return dom.cssName(name); 
      } 
      window.onload = function(){ 
        var el = dom("test"), 
        css3transition = dom.cssName("transition"); 
        el.style[css3transition] = "width 5s ease-in,height 4s linear" 
        dom("start").onclick = function(){ 
          el.style.width = "400px"; 
          el.style.height = "200px" 
        } 
      } 
 
    </script> 
    <style> 
      #test{ 
        top:1px; 
        background: red; 
        width:10px; 
        height:30px; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>处理多个属性的渐变 by 司徒正美</h1> 
    <div id="test"> 
      TEXT 
    </div> 
    <button id="start" type="button">开始测试</button> 
  </body> 
</html>